<template>
<el-row class="rule-container" :gutter="10" style="margin: 0">
  <span class="line"></span>
  <el-col :span="5">
    <el-select style="width: 100%" v-model="cloneItem.field" filterable allow-create @change="(e) => {change(e, item)}">
      <el-option
          v-for="item in keyArray"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        <span style="margin-right: 8px;" class="cuifont" :class="switchDataType(item.type)"></span>
        <span>{{item.label}}</span>
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="5">
    <el-select style="width: 100%" v-model="cloneItem.type" @change="changeType">
      <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="5">
    <el-select style="width: 100%" v-model="cloneItem.operator" @change="optChange">
      <el-option
          v-for="item in optOption"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="5" v-loading="loading">
    <el-select :multiple="multiple" :disabled="disabled" v-model="cloneItem.value" allow-create filterable>
      <el-option
          v-for="item in valueOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
  </el-col>
  <el-col :span="4"><div @click="remove" class="el-icon-circle-close group-action"></div></el-col>
</el-row>
</template>

<script>
export default {
  name: 'rule-container',
  props: ['item', 'keyArray', 'optionList', 'typeOptions'],
  data () {
    return {
      loading: false,
      optOption: [],
      valueOptions: [],
      cloneItem: {}
    }
  },
  watch: {
    item () {
      this.optOption = this._.filter(this.optionList, { type: this.item.type })
    },
    cloneItem (val) {
      this.$emit('update:item', val)
    }
  },
  computed: {
    multiple () {
      return ['in'].includes(this.item.operator)
    },
    disabled () {
      return ['is null', 'is not null', "=''", "!=''"].includes(this.item.operator)
    }
  },
  methods: {
    remove () {
      this.$emit('removeRow')
    },
    optChange () {
      this.cloneItem.value = this.multiple ? [] : ''
    },
    changeType () {
      this.optOption = this._.filter(this.optionList, { type: this.cloneItem.type })
      this.cloneItem.operator = null
      this.cloneItem.value = this.multiple ? [] : ''
    },
    async change () {
      // const obj = this._.find(this.keyArray, {value: this.cloneItem.field})
      // this.cloneItem.type = obj ? obj.type : 'text'
      // this.optOption = this._.filter(this.optionList, { type: this.cloneItem.type })
      // if (obj.event) {
      //   this.loading = true
      //   const test = this.$interface.apiManager[obj.event]({})
      //   const { data } = await test
      //   const arr = data.data.map(item => {
      //     return {
      //       label: item[obj.eventLabel] || item.label,
      //       value: item[obj.eventValue] || item.value
      //     }
      //   })
      //   this.valueOptions = arr
      //   this.loading = false
      // }
      // if (this.cloneItem.type === 'bool') {
      //   this.valueOptions = [
      //     {label: 'True', value: 'true'},
      //     {label: 'False', value: 'false'}
      //   ]
      // }
      // if (obj.options) {
      //   this.valueOptions = obj.options
      // }
    },
    switchDataType (type) {
      let className = ''
      switch (type) {
        case 'number':
          className = 'icon_number_type'
          break
        case 'text':
          className = 'icon_text_type'
          break
        case 'date':
          className = 'icon_date_type'
          break
        case 'boolean':
          className = 'icon_bool_type'
          break
        case 'datetime':
          className = 'icon_datetime_type'
          break
        case 'user':
          className = 'icon_user_type'
          break
        case 'hyperlinks':
          className = 'icon_link_type'
          break
        case 'currency':
          className = 'icon_amount_type'
          break
        default: className = 'icon_null_type'
          break
      }
      return className
    }
  },
  created () {
    this.cloneItem = this.item
    this.optOption = this._.filter(this.optionList, { type: this.cloneItem.type })
  }
}
</script>

<style scoped lang="scss">
.rule-container {
  background: #F0F0F0FF;
  padding: 8px 5px;
  position: relative;
  display: flex;
  align-items: center;
  &::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    border-bottom: 1px dashed #00cc00;
    position: absolute;
    left: -20px;
    top: 50%;
  }
  .line {
    display: block;
    height: 100%;
    position: absolute;
    left: -20px;
    top: -50%;
    width: 1px;
    border-right: 1px dashed #00cc00;
  }
}
.group-action {
  margin-left: 20px;
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
  cursor: pointer;
}
</style>
